<template>
  <div>
    <a-table rowKey="id" :columns="columns" :data-source="dataList" bordered size="small" :scroll="{ x: 3600 }" :customRow="onRow" @change="onTableChange">
    </a-table>
  </div>
</template>

<script>
export default {
  data () {
    const columns = [
      {
        dataIndex: 'status',
        title: '推广状态',
        width: 80,
        fixed: 'left'
      }, {
        dataIndex: 'info',
        title: '推广信息',
        width: 100,
        fixed: 'left'
      }, {
        dataIndex: 'ask',
        title: '营销诉求',
        width: 80,
        fixed: 'left'
      }, {
        dataIndex: 'mode',
        title: '推广模式',
        width: 80,
        fixed: 'left'
      }, {
        dataIndex: 'budget',
        title: '预算（元）',
        width: 110,
        fixed: 'left'
      }, {
        dataIndex: 'date',
        title: '投放日期',
        width: 100,
        fixed: 'left'
      }, {
        dataIndex: 'price',
        title: '出价方式',
        width: 80,
        fixed: 'left'
      }, {
        title: '基础指标',
        children: [
          {
            dataIndex: 'view',
            title: '观看次数',
            sorter: true
          }, {
            dataIndex: 'viewcost',
            title: '观看成本',
            sorter: true
          }, {
            dataIndex: 'cost',
            title: '花费',
            sorter: true
          }
        ]
      }, {
        title: '互动表现',
        children: [
          {
            dataIndex: 'acAmount',
            title: '互动量',
            sorter: true
          }, {
            dataIndex: 'acPricent',
            title: '互动率',
            sorter: true
          }, {
            dataIndex: 'averageLong',
            title: '平均观看时长',
            sorter: true
          }, {
            dataIndex: 'liveLike',
            title: '直播点赞量',
            sorter: true
          }, {
            dataIndex: 'liveShare',
            title: '直播分享量',
            sorter: true
          }, {
            dataIndex: 'liveComment',
            title: '直播评论量',
            sorter: true
          }
        ]
      }, {
        title: '引导访问',
        children: [
          {
            dataIndex: 'guideAmount',
            title: '引导进店量',
            sorter: true
          }, {
            dataIndex: 'guideRate',
            title: '引导进店率',
            sorter: true
          }
        ]
      }, {
        title: '粉丝获取',
        children: [
          {
            dataIndex: 'fans',
            title: '粉丝关注量',
            sorter: true
          }
        ]
      }, {
        title: '成交转化',
        children: [
          {
            dataIndex: 'orderAmount',
            title: '成交订单量',
            sorter: true
          }, {
            dataIndex: 'dealSum',
            title: '成交金额',
            sorter: true
          }, {
            dataIndex: 'collectAmount',
            title: '收藏宝贝量',
            sorter: true
          }, {
            dataIndex: 'goods',
            title: '商品加购数',
            sorter: true
          }, {
            dataIndex: 'invest',
            title: '投资回报率',
            sorter: true
          }, {
            dataIndex: 'advanceAmount',
            title: '预售订单量',
            sorter: true
          }, {
            dataIndex: 'advanceSum',
            title: '预售成交金额',
            sorter: true
          }, {
            dataIndex: 'shopAmount',
            title: '购物金充值笔数',
            sorter: true
          }, {
            dataIndex: 'shopSum',
            title: '购物金充值金额',
            sorter: true
          }
        ]
      }
    ]
    const dataList = [
      {
        id: 1,
        averageLong: 20
      }
    ]
    return {
      columns,
      dataList,
      sortOrders: [{
        descending: true,
        propertyName: 'created_time'
      }],
    }
  },
  methods: {
    onTableChange (pagination, filters, sorter) {
      console.log(sorter);
      const obj = {
        descending: sorter.order === 'descend',
        propertyName: sorter.field
      }
      this.sortOrders = [obj]
      this.getDataList()
    },
    onRow (record, index) {
      return {
        on: {
          click: () => {
            console.log(index)
          }
        }
      }
    },
    getDataList () {
      console.log(this.sortOrders)
    }
  },
}
</script>

<style lang="less">
</style>